<template>
  <div class="login-container">
    <el-form :rules="rules"ref="form" :model="form" label-width="80px" class="login-form">
      <h2 class="login-title">疫情防控管理系统</h2>
      <el-form-item label="用户名"  prop="userName">
        <el-input prefix-icon="el-icon-user" type="username" v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="passWord">
        <el-input  prefix-icon="el-icon-lock" type="password" v-model="form.passWord" show-password></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="small" @click="login">登录</el-button>
        <el-button type="warning" size="small" @click="into" style="margin-left:10px">注册</el-button>
        <router-link to="/retrieve"  class="link-type" style="margin-left: 65px" >
          <span>忘记密码？</span>
        </router-link>

      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="js">
import {setRotes} from "../router";

export default {
  name: "Login",
  data() {
    return {
      form: {
        userName: 'admin',
        passWord: '123456'
      },
      rules: {
        userName: [
          { message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        passWord: [
          { message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    into(){
      this.$router.push("/register")
    },
    login(){
      this.$refs['form'].validate((valid) => {
        if (valid) { //表单校验合法
          this.request.post("/user/login",this.form).then(res =>{
            if(res.code === 200 ){
              localStorage.setItem("user",JSON.stringify(res.data)) //把用户信息存储到浏览器
              localStorage.setItem("menu",JSON.stringify(res.data.menu))//把菜单传到浏览器
              //判断角色权限，如果用户是超级管理员或者防疫人员登录到后台，否则登录到前台
              if (res.data.role === 'ROLE_ADMIN' || res.data.role ==="防疫人员") {
                //动态设置用户的路由
                setRotes()
                this.$router.push("/home")
              } else {
                this.$router.push("/front/home")
              }

              this.$message.success("登录成功")
            }
            else {
              this.$message.error(res.message)
            }
          })
        }
      });
    },
  }
}
</script>

<style scoped>
.login-form {
  width: 350px;
  margin: 160px auto; /* 上下间距160px，左右自动居中*/
  background-color: rgba(108,225,254,0.7); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}

/* 背景 */
.login-container {
  opacity: 80%;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: absolute; /* 不可缺少 */
  background-repeat: no-repeat;
  background-image: url("../assets/background.png");
}

/* 标题 */
.login-title {
  color: #303133;
  text-align: center;
}
.router-link-active {
  color: yellow;
}
a{
  color: #29A8EFFF;
}
</style>